<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>当点击我的时候需要加载a模块</button>
    <script type="module">
      // 按需加载：需要这个模块的时候再加载模块，懒加载
      // 按需加载，js提供一个 import函数，返还一个promise对象。
      // 什么时候引入模块？在页面加载的时候 引入的模块
      // import a, { c } from "./a.js";
      // import d, { e } from "./b.js";

      // console.log(c, d);
      document.querySelector("button").onclick = async function () {
        // import a,{c} from './a.js';
        // console.log(123);
        // import("./a.js"); //加载 a模块
        // 可以通过then方法获取 导出的结果；
        // import("./a.js").then((res) => {
        //   console.log(res);
        // });
        let res1 = await import("./a.js");
        let res2 = await import("./b.js");
        console.log(res1, res2);
      };
    </script>
  </body>
</html>
